import {defineComponent, reactive, ref, watchEffect} from "vue";
import style from "./css/index.module.css"
import {NoticesStore} from "@/stores/notices";
import {storeToRefs} from "pinia";
import {formatDateTime} from "@/utils/utils";
import "../home/css/index.css"
import Pagination from "@/components/Pagination";
import {useRouter} from "vue-router";
export default defineComponent({
    setup(){
        const notices_store = NoticesStore()
        const {noticesList} = storeToRefs(notices_store)
        const total = ref(0)
        const parmes = reactive({
            pageNum:1
        })
        const router = useRouter()

        const list = ref([])
        const initList = async () => {
            const res = await notices_store.getNoticesList(parmes)
            total.value = res.total
            list.value = noticesList.value.map(item => {
                return <div className={style.notice_item}
                            onClick = {() => {
                            handleDetails(item.id)
                        }}>
                    <div className={style.tit}>{item.notice_title}</div>
                    <div className={style.time}>{formatDateTime(item.createdAt)}</div>
                </div>
            })
        }
        const handleCurrentChange = (val) => {
            parmes.pageNum = val
            initList()
        }

        //点击跳转详情
        const handleDetails = async (id) => {
            // 将该公告的浏览量+1
            const code = await notices_store.updateNoticesRecord(id, 'view')
            if (code === 0) {
                // 跳转值详情页面
                router.push({name: 'noticeDetails', query: {id}})
            }
        }
        initList()


        return ()=>{
            return <>
                <div className={style.container}>
                    <div className={style.notice_box}>
                        <div className={style.notice_title}>站内公告</div>
                        <div className={style.notice_items}>
                            {list.value}
                        </div>
                        <Pagination
                            handleCurrentChange={handleCurrentChange}
                            total={total.value}
                        />
                    </div>
                </div>

            </>
        }
    }
})